<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script src="/lib/vue.min.js"></script>
    <script src="/lib/axios.min.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="/lib/css/clothes_list.css">
</head>
<style>
    .el-form-item{
        width: 60%;
    }
</style>
<body>
<div id="app" style="margin: 0 auto; width: 60%; height: 500px; padding-top: 100px; margin-top: 70px;">
    <div class="block" style="margin: 0 auto; margin-left: 32%"><strong style="font-size: 60px; color: deepskyblue; letter-spacing: 10px">服装管理系统</strong></div>
    <div class="block" style="margin: 0 auto; margin-left: 43%; margin-top: 30px"><el-avatar style="border: 5px solid deepskyblue" :size="150" :src="circleUrl"></el-avatar></div>
    <div style="margin: 0 auto; width: 80%; height: 300px; padding-top: 60px; padding-left: 80px; text-align:center; vertical-align:middle;">
                <el-form :label-position="labelPosition" label-width="100px" :model="formData" style="margin-left: 150px;">
                    <el-form-item label="账号">
                        <el-input placeholder="请输入账号" v-model="formData.account" @blur="find_headPage" clearable></el-input>
                    </el-form-item>
                    <el-form-item label="密码">
                        <el-input placeholder="请输入密码" v-model="formData.password" @keyup.enter.native="onSubmit()" show-password></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit()">登录</el-button>
                    </el-form-item>
                </el-form>
    </div>
</div>
<script>
    var vue = new Vue({
        el:"#app",
        data:{
            circleUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
            labelPosition: 'right',
            formData: {
                account: '',
                password: ''
            }
        },
        mounted: function () {

        },
        methods:{
            find_headPage: function(){
                console.log("失去焦点");
                var account = this.formData.account;
                var url = "login/get/head?account=" + account;
                if(account!=""){
                    axios.get(url).then(function (response) {
                        var res = response.data;
                        if(res.success){
                            var time = new Date().getTime();
                            vue.circleUrl = "images/user/" + res.data + ".jpg?timestamp=" + time;
                            console.log("vue.circleUrl:" + vue.circleUrl);
                        }else {
                            vue.circleUrl = "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png";
                        }
                    })
                }else {
                    this.circleUrl = "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png";
                }
            },
            onSubmit: function() {
                var obj = this;
                console.log('submit!');
                var url = "login/check";
                axios.post(url, this.formData).then(function (response) {
                    var res = response.data;
                    if(res.success){
                        console.log("登录成功");
                        obj.$message({
                            type: 'success',
                            message: '登录成功!'
                        });
                        vue.jump("clothes_index_page");
                    }else {
                        console.log("登录失败");
                        obj.$message.error({
                            type: 'fail',
                            message: res.msg
                        });
                    }
                })
            },
            jump: function(url){
                setInterval(function () {
                    window.location.href = url;
                }, 1000);
            }
        }
    })
</script>
</body>
</html>